﻿@model LynxWebLog.BlogLayoutData
@Styles.Render("~/Content/themes/base/jquery-ui.css")
@Styles.Render("~/ColorPicker/jquery.colorpicker.css")


@using (Html.BeginForm("Edit", "BlogLayoutData", FormMethod.Post, new { role = "form", enctype = "multipart/form-data" })) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset class="form-horizontal">
        <legend>BlogLayoutData</legend>
        <div class="container">
            <div class="row">
                <div class="col-sm-2 col-md-2 col-lg-2">
                    <div class="form-group">
                        @Html.LabelFor(model => model.bloglayoutid, new { @class = "control-label" })
                                    <div class="controls">
                                        @Html.TextBoxFor(model => model.bloglayoutid, new { @class = "form-control input-sm", disabled = "disabled" })
                                        @Html.HiddenFor(model => model.bloglayoutid)
                                                            </div>
                                                        </div>
                </div>
                <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-sm-3 col-md-3 col-lg-3">
                    <div class="form-group">
                        @Html.LabelFor(model => model.username, new { @class = "control-label" })
                                    <div class="controls">
                                        @Html.TextBoxFor(model => model.username, new { @class = "form-control input-sm", disabled = "disabled" })
                                        @Html.HiddenFor(model => model.username)
                                                            </div>
                                                        </div>
                    </div>
                <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-sm-5 col-md-5 col-lg-5">
                    <div class="form-group">
                        @Html.LabelFor(model => model.blogname, new { @class = "control-label" })
                                    <div class="controls">
                                        @Html.TextBoxFor(model => model.blogname, new { @class = "form-control input-sm", disabled = "disabled" })
                                        @Html.HiddenFor(model => model.blogname)
                                                            </div>
                                                        </div>
                                                    </div>
                </div>

            <div class="row">
                <div class="form-group">
                    @Html.LabelFor(model => model.header_image, new { @class = "control-label" })
                    <div class="controls">
                        <input type="file" id="header_image" name="header_image" />
                        @Html.TextBoxFor(model => model.header_image, new { @class = "form-control input-sm", disabled = "disabled" })
                        @Html.ValidationMessageFor(model => model.header_image, null, new { @class = "help-inline" })
                        @Html.HiddenFor(model => model.header_image)
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.color_primary, new { @class = "control-label" })
                <div class="controls">
                    <input type="text" class="cp-lynx col-sm-3 col-md-2 col-lg-1" id="color_primary" name="color_primary" value="@Model.color_primary" />
                    <div class="cp-alt-target1 col-sm-6 col-md-5 col-lg-5" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
                        <div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Primary in BG</div>
                    </div>
                    @Html.ValidationMessageFor(model => model.color_primary, null, new { @class = "help-inline" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.color_border, new { @class = "control-label" })
                <div class="controls">
                    <input type="text" class="cp-lynx col-sm-3 col-md-2 col-lg-1" id="color_border" name="color_border" value="@Model.color_border" />
                    <div class="cp-alt-target2 col-sm-6 col-md-5 col-lg-5" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
                        <div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Border in BG</div>
                    </div>
                    @Html.ValidationMessageFor(model => model.color_border, null, new { @class = "help-inline" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.color_background, new { @class = "control-label" })
                <div class="controls">
                    <input type="text" class="cp-lynx col-sm-3 col-md-2 col-lg-1" id="color_background" name="color_background" value="@Model.color_background" />
                    <div class="cp-alt-target3 col-sm-6 col-md-5 col-lg-5" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
                        <div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background in BG</div>
                    </div>
                    @Html.ValidationMessageFor(model => model.color_background, null, new { @class = "help-inline" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.color_primary_dark, new { @class = "control-label" })
                <div class="controls">
                    <input type="text" class="cp-lynx col-sm-3 col-md-2 col-lg-1" id="color_primary_dark" name="color_primary_dark" value="@Model.color_primary_dark" />
                    <div class="cp-alt-target4 col-sm-6 col-md-5 col-lg-5" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
                        <div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Primary Dark in BG</div>
                    </div>
                    @Html.ValidationMessageFor(model => model.color_primary_dark, null, new { @class = "help-inline" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.color_border_dark, new { @class = "control-label" })
                <div class="controls">
                    <input type="text" class="cp-lynx col-sm-3 col-md-2 col-lg-1" id="color_border_dark" name="color_border_dark" value="@Model.color_border_dark" />
                    <div class="cp-alt-target5 col-sm-5 col-md-5 col-lg-5" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
                        <div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Border Dark in BG</div>
                    </div>
                    @Html.ValidationMessageFor(model => model.color_border_dark, null, new { @class = "help-inline" })
                </div>
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                        @Html.LabelFor(model => model.category_display, new { @class = "control-label" })
                        <div class="controls">
                            @Html.EditorFor(model => model.category_display)
                            @Html.ValidationMessageFor(model => model.category_display, null, new { @class = "help-inline" })
                        </div>
                    </div>

                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                        @Html.LabelFor(model => model.month_display, new { @class = "control-label" })
                                        <div class="controls">
                                            @Html.EditorFor(model => model.month_display)
                                                            @Html.ValidationMessageFor(model => model.month_display, null, new { @class = "help-inline" })
                                                                        </div>
                                                                    </div>

                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                        @Html.LabelFor(model => model.tagcloud_display, new { @class = "control-label" })
                                        <div class="controls">
                                            @Html.EditorFor(model => model.tagcloud_display)
                                                            @Html.ValidationMessageFor(model => model.tagcloud_display, null, new { @class = "help-inline" })
                                                                        </div>
                                                                    </div>

                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                        @Html.LabelFor(model => model.googlead_display, new { @class = "control-label" })
                                        <div class="controls">
                                            @Html.EditorFor(model => model.googlead_display)
                                                            @Html.ValidationMessageFor(model => model.googlead_display, null, new { @class = "help-inline" })
                                                                        </div>
                                                                    </div>
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.custom_css, new { @class = "control-label" })
                <div class="controls">
                    @Html.TextAreaFor(model => model.custom_css, new { @class = "form-control input-sm" })
                    @Html.ValidationMessageFor(model => model.custom_css, null, new { @class = "help-inline" })
                </div>
            </div>

            <div class="form-actions">
                <input type="submit" value="Save" class="btn btn-default btn-primary" />
            </div>
        </div>

    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section scripts {
@Scripts.Render("~/bundles/jquery-ui")
@Scripts.Render("~/ColorPicker/jquery.colorpicker.js")
@Scripts.Render("~/ColorPicker/i18n/jquery.ui.colorpicker-en.js")
@Scripts.Render("~/ColorPicker/swatches/jquery.ui.colorpicker-pantone.js")
@Scripts.Render("~/ColorPicker/parts/jquery.ui.colorpicker-memory.js") 
@Scripts.Render("~/ColorPicker/parts/jquery.ui.colorpicker-rgbslider.js")
    <script>
        $(function() {
            $('#color_primary').colorpicker({
                altField: '.cp-alt-target1',
                altProperties: 'background-color',
                parts: ['header', 'map', 'bar', 'hex', 'preview', 'swatches'],
                showCloseButton: true,
                colorFormat: '#HEX'
            });
            $('#color_primary_dark').colorpicker({
                altField: '.cp-alt-target4',
                altProperties: 'background-color',
                parts: ['header', 'map', 'bar', 'hex', 'preview', 'swatches'],
                showCloseButton: true,
                colorFormat: '#HEX'
            });
            $('#color_background').colorpicker({
                altField: '.cp-alt-target3',
                altProperties: 'background-color',
                parts: ['header', 'map', 'bar', 'hex', 'preview', 'swatches'],
                showCloseButton: true,
                colorFormat: '#HEX'
            });
            $('#color_border').colorpicker({
                altField: '.cp-alt-target2',
                altProperties: 'background-color',
                parts: ['header', 'map', 'bar', 'hex', 'preview', 'swatches'],
                showCloseButton: true,
                colorFormat: '#HEX'
            });
            $('#color_border_dark').colorpicker({
                altField: '.cp-alt-target5',
                altProperties: 'background-color',
                parts: ['header', 'map', 'bar', 'hex', 'preview', 'swatches'],
                showCloseButton: true,
                colorFormat: '#HEX'
            });
        });
    </script>
}

